<template>
    <Card shadow>
        <div style="display: flex;">
            <Layout :width="235">
                <Menu active-name="loginInfo">
                    <MenuItem name="loginInfo">登录信息</MenuItem>
                    <MenuItem name="userInfo">个人信息</MenuItem>
                    <MenuItem name="teacherInfo">职位信息</MenuItem>
                </Menu>
            </Layout>
            <Layout style="width: 100%; padding: 0px 10px 0 40px;">
                <Form
                      ref="userForm"
                      :label-width="100"
                      label-position="left"
                  >
                      <FormItem label="用户账号：">
                          <span>Dinosaur</span>
                      </FormItem>
                      <FormItem label="性别：">
                          <RadioGroup>
                            <Radio :label="1" checked=true>男</Radio>
                            <Radio :label="0">女</Radio>
                          </RadioGroup>
                      </FormItem>
                      <FormItem label="手机号：">
                          <span>13531568995</span>
                          <div style="display:inline-block;margin-left:20px;font-size:13px;">
                              <a>修改手机号</a>
                          </div>
                      </FormItem>
                      <FormItem label="邮箱：">
                          <span>514625647@qq.com</span>
                          <div style="display:inline-block;margin-left:20px;font-size:13px;">
                              <a>修改邮箱</a>
                          </div>
                      </FormItem>
                      <FormItem label="地址：" >
                          <Cascader data-type="code" level="2" style="width:250px"/>
                      </FormItem>
                      <FormItem label="所属部门：">
                          <span>software</span>
                      </FormItem>
                    <FormItem label="用户类型：">
                          <span>普通用户</span>
                      </FormItem>
                      <FormItem label="创建时间：">
                          <span>2015-09-10 18:02:05</span>
                      </FormItem>
                      <FormItem>
                          <Button type="primary" style="width: 100px;margin-right:5px" :loading="saveLoading" @click="saveEdit">保存</Button>
                          <Button @click="cancelEditUserInfo">取消</Button>
                      </FormItem>
                  </Form>
            </Layout>
        </div>
    </Card>
</template>
<script>
export default {
  name: 'account_center',
  data () {
    return {
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      saveLoading: false,
      ruleValidate: {
        name: [
          {
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }
        ],
        mail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          {
            required: true,
            message: 'Please select the city',
            trigger: 'change'
          }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          {
            required: true,
            type: 'array',
            min: 1,
            message: 'Choose at least one hobby',
            trigger: 'change'
          },
          {
            type: 'array',
            max: 2,
            message: 'Choose two hobbies at best',
            trigger: 'change'
          }
        ],
        date: [
          {
            required: true,
            type: 'date',
            message: 'Please select the date',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            type: 'string',
            message: 'Please select time',
            trigger: 'change'
          }
        ],
        desc: [
          {
            required: true,
            message: 'Please enter a personal introduction',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 20,
            message: 'Introduce no less than 20 words',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    saveEdit () {
      this.saveLoading = true
      let params = this.userForm
      delete params.nickName
      delete params.description
      // userInfoEdit(params).then(res => {
      //   this.saveLoading = false;
      //   if (res.success === true) {
      this.$Message.success('保存成功')
      //     // 更新用户信息
      //     Cookies.set("userInfo", this.userForm);
      //     // 更新头像
      //     this.$store.commit("setAvatarPath", this.userForm.avatar);
      //   }
      // });
    },
    cancelEditUserInfo () {
      this.$store.commit('closeTag', { name: 'account-center' })
      // localStorage.pageOpenedList = JSON.stringify(
      //   this.$store.state.app.pageOpenedList
      // );
      // let lastPageName = "";
      // if (this.$store.state.app.pageOpenedList.length > 1) {
      //   lastPageName = this.$store.state.app.pageOpenedList[1].name;
      // } else {
      //   lastPageName = this.$store.state.app.pageOpenedList[0].name;
      // }
      // this.$router.push({
      //   name: lastPageName
      // });
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
